<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="shortcut icon" href="#">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js" type="text/javascript"
            charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript">
        $().ready(function () {
            var nowDate = new Date();
            var nowYear = nowDate.getFullYear();
            var nowMonth = nowDate.getMonth() + 1;
            var nowDate = nowDate.getDate();
            if (nowMonth < 10) {
                nowMonth = "0" + nowMonth;
            }
            if (nowDate < 10) {
                nowDate = "0" + nowDate;
            }
            layui.use(['layer', 'form', "element", 'table', 'laypage', 'laydate'], function () {
                let layer, form, element, table, laypage, laydate;
                layer = layui.layer;
                form = layui.form;
                element = layui.element;
                table = layui.table;
                laypage = layui.laypage;
                laydate = layui.laydate;
                var tableIns = null;
                var dataLength = 0;
                $.ajax({
                    type: "get",
                    url: "${pageContext.request.contextPath}/listAll",
                    dataType: "json",
                    beforeSend: function () {
                        element.progress('demo', '0%');
                    },
                    success: function (result) {
                        dataLength = result.length;
                        tableIns = table.render({
                            elem: '#dataList'
                            , toolbar: "#toolBar"
                            , data: result
                            , cols: [[
                                {field: 'empId', title: '编号'}
                                , {field: 'empName', title: '姓名'}
                                , {field: 'empHiredate', title: '入职日期'}
                                , {
                                    field: 'deptName',
                                    title: '部门名称',
                                    templet: '<div>{{d.dept ? d.dept.deptName:""}}</div>'
                                }
                                , {
                                    field: 'empStatus',
                                    title: '是否已被删除',
                                    templet: function (d) {
                                        if (d.empStatus === 1) {
                                            return '<div>未删除</div>';
                                        } else if (d.empStatus === 0) {
                                            return '<div>已删除</div>';
                                        }
                                    }
                                }
                                , {title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo'}
                            ]]
                            , skin: 'line'
                            , page: true
                            , height: 'full-100'
                            , count: dataLength
                            , limits: [10, 20, 50]
                            , limit: 10
                            , size: 'lg'
                            , cache: false
                        });
                        element.progress('demo', '100%');
                    },
                    error: function () {
                        layer.alert("失败");
                    }
                });

                var addModal =
                    `
                <form class="layui-form" method="post" id="addForm" lay-filter="addForm" style="margin: 10px !important;padding: 10px !important;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户</label>
                        <div class="layui-input-block" style="width: 400px !important;">
                            <input type="text" name="empName" lay-verify="title" autocomplete="off" placeholder=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">时间</label>
                        <div class="layui-input-block" style="width: 400px !important;">
                            <input type="text" name="empHiredate" lay-verify="title" autocomplete="off" placeholder=""
                                   class="layui-input" id="hiredate">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">部门</label>
                        <div class="layui-input-block" style="width: 400px !important;">
                            <select name="dept" id="depts">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="width: 400px !important;">
                            <button lay-submit class="layui-btn layui-btn-normal layui-btn-fluid" id="addFormSubmit" lay-filter="addSubmit">提交</button>
                        </div>
                    </div>
                </form>`;

                form.on('submit(addSubmit)', function (data) {
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/toAddEmp",
                        dataType: "json",
                        // data: '[{"empName":"' + data.field.empName + '", "empHireDate":"' + data.field.empHiredate + '", "deptId":' + data.field.dept + '}]',
                        data: data.field,
                        success: function (msg) {
                            console.log(msg);
                            if (msg === 1) {
                                layer.msg("添加成功", {icon: 1});
                            } else {
                                layer.msg("添加失败", {icon: 5});
                            }
                        }
                    });
                    $(".layui-layer-close1").trigger('click');
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                table.on('toolbar(dataListTools)', function (obj) {
                    if (obj.event === 'addEmpInfo') {
                        $.ajax({
                            type: "get",
                            url: "${pageContext.request.contextPath}/listAllDept",
                            dataType: "json",
                            success: function (result) {
                                let dataLength = result.length;
                                // var new_result = jQuery.parseJSON(result);
                                for (var i = 0; i < dataLength; i++) {
                                    $("#depts").append('<option id="dept-' + result[i].deptId + '" value="' + result[i].deptId + '">' + result[i].deptName + '</option>');
                                }
                                layui.form.render("select");
                            }
                        });
                        form.render('select', 'addForm');
                        layer.open({
                            type: 1,
                            title: "新增",
                            content: addModal,
                            area: ['800px', '600px']
                        });
                        laydate.render({
                            elem: '#hiredate',
                            value: nowYear + "-" + nowMonth + "-" + nowDate
                        });
                    }
                });
                table.on('tool(dataListTools)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        layer.msg('详细信息' + JSON.stringify(data));
                    } else if (obj.event === 'del') {
                        layer.confirm('将要删除编号为' + data.empId + '的数据！', function (index) {
                            $.ajax({
                                type: "post",
                                url: "${pageContext.request.contextPath}/updateEmpStatus",
                                data: "id=" + data.empId + "&status=" + (data.empStatus === 1 ? 0 : 1),
                                dataType: "text",
                                success: function (msg) {
                                    if (msg === "1") {
                                        layer.close(index);
                                        layer.msg("删除成功", {icon: 1});
                                    } else {
                                        layer.msg("删除失败", {icon: 5});
                                    }
                                }
                            });
                            $.ajax({
                                type: "get",
                                url: "${pageContext.request.contextPath}/listAllDept",
                                dataType: "json",
                                success: function (result) {
                                }
                            });
                            $.ajax({
                                type: "get",
                                url: "${pageContext.request.contextPath}/listAll",
                                dataType: "json",
                                beforeSend: function () {
                                    element.progress('demo', '0%');
                                },
                                success: function (result) {
                                    dataLength = result.length;
                                    tableIns = table.reload('dataList', {
                                        elem: '#dataList'
                                        , toolbar: "#toolBar"
                                        , data: result
                                        , cols: [[
                                            {field: 'empId', title: '编号'}
                                            , {field: 'empName', title: '姓名'}
                                            , {field: 'empHiredate', title: '入职日期'}
                                            , {
                                                field: 'deptName',
                                                title: '部门名称',
                                                templet: '<div>{{d.dept ? d.dept.deptName:""}}</div>'
                                            }
                                            , {
                                                field: 'empStatus',
                                                title: '是否已被删除',
                                                templet: function (d) {
                                                    if (d.empStatus === 1) {
                                                        return '<div>未删除</div>';
                                                    } else if (d.empStatus === 0) {
                                                        return '<div>已删除</div>';
                                                    }
                                                }
                                            }
                                            , {title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo'}
                                        ]]
                                        , skin: 'line'
                                        , page: true
                                        , height: 'full-100'
                                        , count: dataLength
                                        , limits: [10, 20, 50]
                                        , limit: 10
                                        , size: 'lg'
                                        , cache: false
                                    });
                                    element.progress('demo', '100%');
                                },
                                error: function () {
                                    layer.alert("失败");
                                }
                            });
                            layer.close(index);
                        })
                        ;
                    } else if (obj.event === 'edit') {
                        // layer.alert('编辑行：<br>' + JSON.stringify(data))
                        layer.open({
                            type: 1,
                            title: '修改',
                            content: '自定义HTML内容'
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <hr/>
            <div class="layui-progress" lay-filter="demo" lay-showPercent="true">
                <div class="layui-progress-bar layui-bg-orange" lay-percent="100%"></div>
            </div>
            <table class="layui-table layui-hide" id="dataList" lay-filter="dataListTools"></table>
            <hr/>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-radius layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-radius {{d.empStatus===1?'layui-btn-danger':'layui-btn-warm'}} layui-btn-sm"
       lay-event="del">{{d.empStatus===1?"删除":"恢复"}}</a>
</script>
<script type="text/html" id="toolBar">
    <button class="layui-btn layui-btn-radius" lay-event="addEmpInfo">新增</button>
</script>
<script type="text/html" id="addModal">

</script>
</body>
</html>
